<template>
    <div class="container">
        <div class="box">
            <div class="login-title-wrapper">企业招聘在线考试系统</div>
            <div class="login-subtitle">欢迎登录</div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item prop="username" prefix-icon="el-icon-user">
                    <el-input v-model="ruleForm.username" autocomplete="off" placeholder="用户名称" clearable></el-input>
                </el-form-item>
                <el-form-item prop="password" prefix-icon="el-icon-lock">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="用户密码" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <div style="margin-bottom: 15px">
                        <el-button type="primary" @click="submitForm('ruleForm')">立即登录</el-button>
                    </div>
                    <div>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </div>
                    <router-link tag="span" :to="{path:'register'}">
                        <el-button style="margin-top: 10px">没有账号？点击注册</el-button>
                    </router-link>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    import {AddRoutes} from "@/router";

    export default {
        data() {
            return {
                ruleForm: {
                    username: "",
                    password: ""
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名称', trigger: 'blur'},
                        // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        //{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(this.ruleForm)
                        this.$axios.post("/sysUser/login", this.ruleForm).then(res => {
                            console.log(res)
                            if (res.code === 200) {
                                this.$message({
                                    message: "登录成功，正在跳转",
                                    type: "success"
                                })
                                let userInfo = res.data
                                localStorage.setItem("systemUser", JSON.stringify(userInfo))
                                localStorage.setItem("systemRoleMenu", JSON.stringify(userInfo.roleMenu))
                                AddRoutes()
                                //解决跳转首页后页面404问题
                                if (res.data.roleType === "USER") {
                                    this.$router.push({path: "/front"})
                                } else {
                                    this.$router.push({path: "/"})
                                }
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>
<style>
    .box .el-form-item__content {
        margin-left: 0 !important;
    }

    .box .el-button {
        width: 100% !important;
        height: 36px; /* 增加按钮高度 */
        font-size: 14px; /* 增加按钮字体大小 */
    }

    .box .el-input__inner {
        height: 36px; /* 增加输入框高度 */
        font-size: 16px; /* 增加输入框字体大小 */
        padding: 0 15px; /* 增加输入框内边距 */
    }

    /*.container {*/
    /*    width: 100%;*/
    /*    height: 100vh;*/
    /*    position: relative;*/
    /*    background: url("../assets/login.jpg") 100% 100%;*/
    /*    background-size: cover;*/
    /*    display: flex;*/
    /*    justify-content: flex-end;*/
    /*    align-items: center;*/
    /*}*/

    /*.login-title-wrapper {*/
    /*    display: inline-block;*/
    /*    padding: 10px 20px; !* 添加内边距 *!*/
    /*    font-size: 36px;*/
    /*    color: #fff; !* 字体颜色设置为白色 *!*/
    /*    font-weight: bold;*/
    /*    background-color:royalblue; !* 添加蓝色背景 *!*/
    /*    border-radius: 5px; !* 圆角边框 *!*/
    /*    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); !* 添加阴影效果 *!*/
    /*}*/

    /*.login-title {*/
    /*    margin-top: 50px;*/
    /*    width: 100%;*/
    /*}*/

    /*.box {*/
    /*    width: 45%;*/
    /*    height: 100vh;*/
    /*    padding: 30px;*/
    /*    box-sizing: border-box;*/
    /*    background-color: skyblue;*/
    /*    border-radius: 5px;*/
    /*    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*    align-items: center;*/
    /*    justify-content: flex-start;*/
    /*}*/

    /*.login-subtitle {*/
    /*    text-align: center;*/
    /*    margin-bottom: 20px; !* 增加下边距 *!*/
    /*    font-size: 20px; !* 增加字体大小 *!*/
    /*    color: #333;*/
    /*    width: 100%;*/
    /*}*/

    /*.el-form {*/
    /*    width: 100%;*/
    /*    max-width: 350px; !* 增加表单最大宽度 *!*/
    /*    margin-top: 20px;*/
    /*}*/

    /*.el-form-item {*/
    /*    margin-bottom: 20px; !* 增加下边距 *!*/
    /*    width: 100%;*/
    /*}*/
</style>
<style scoped>
    .container {
        width: 100%;
        height: 100vh;
        position: relative;
         background: url('~@/assets/login.jpg') 100% 100%;
        background-size: cover;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .login-title-wrapper {
        display: inline-block;
        padding: 10px 20px; /* 添加内边距 */
        font-size: 36px;
        color: #fff; /* 字体颜色设置为白色 */
        font-weight: bold;
        background-color:royalblue; /* 添加蓝色背景 */
        border-radius: 5px; /* 圆角边框 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    }

    .login-title {
        margin-top: 50px;
        width: 100%;
    }

    .box {
        width: 45%;
        height: 100vh;
        padding: 30px;
        box-sizing: border-box;
        background-color: skyblue;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .login-subtitle {
        text-align: center;
        margin-bottom: 20px; /* 增加下边距 */
        font-size: 20px; /* 增加字体大小 */
        color: #333;
        width: 100%;
    }

    .el-form {
        width: 100%;
        max-width: 350px; /* 增加表单最大宽度 */
        margin-top: 20px;
    }

    .el-form-item {
        margin-bottom: 20px; /* 增加下边距 */
        width: 100%;
    }
    .container {
        width: 100%;
        height: 100vh;
        position: relative;
        background: url('~@/assets/login.jpg') 100% 100%;
        background-size: cover;
        display: flex;
        justify-content: center; /* 居中对齐 */
        align-items: center; /* 垂直居中 */
    }

    .login-title {
        text-align: center;
        margin-top: 50px;
        padding: 10px 20px; /* 添加内边距 */
        font-size: 36px;
        color: #fff; /* 字体颜色设置为白色 */
        font-weight: bold;
        width: 100%;
        background-color: #409EFF; /* 添加蓝色背景 */
        border-radius: 5px; /* 圆角边框 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    }

    .box {
        width: 45%;
        height: auto;
        padding: 30px;
        box-sizing: border-box;
        background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .login-subtitle {
        text-align: center;
        margin-top: 20px; /* 增加上边距，与标题保持距离 */
        margin-bottom: 20px; /* 增加下边距 */
        font-size: 24px; /* 增加字体大小 */
        color: royalblue; /* 设置字体颜色为蓝色，与主色调一致 */
        font-weight: bold; /* 字体加粗 */
        width: 100%;
    }

    .el-form {
        width: 100%;
        max-width: 400px; /* 增加表单最大宽度 */
        margin-top: 20px;
    }

    .el-form-item {
        margin-bottom: 20px;
        width: 100%;
    }

    .el-input__inner {
        height: 50px;
        font-size: 16px;
        padding: 0 15px;
        border-radius: 5px; /* 输入框圆角 */
        border: 1px solid #dcdfe6; /* 输入框边框 */
    }

    .box .el-button {
        width: 100%;
        height: 50px; /* 增加按钮高度 */
        font-size: 18px; /* 增加按钮字体大小 */
        border-radius: 5px; /* 按钮圆角 */
    }

    .el-button[type="primary"] {
        background-color: #409EFF; /* 主按钮背景色 */
        border-color: #409EFF; /* 主按钮边框色 */
    }

    .el-button:focus, .el-button:hover {
        background-color:royalblue; /* 按钮悬浮背景色 */
        border-color: #66b1ff; /* 按钮悬浮边框色 */
    }
</style>
